Estoy tratando de darle algo de estilo a mi cursor con Javascript, con una marca que sigue al cursor en todas partes de la pantalla. Ahora estoy tratando de aplicar un estilo específico cuando hago clic en la página. El problema es que mi función funciona pero solo una vez. Luego tengo que actualizar la página para que pueda funcionar de nuevo. He usado un método addEventListener con 'clic', que creo que es el método adecuado.
var cursor1 = document.querySelector(".cursor1"); var cursor2 = document.querySelector(".cursor2"); /* this was some test. function testscale(){ cursor1.animate( [{transform: 'scale(1)'},{transform: 'scale(0)'}], {duration:200} ); */ document.addEventListener('click', function(){ cursor1.classList.add("cursoranimation"); }); --// document.addEventListener('mousemove', function(e){ cursor1.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;"; }); //-les styles sont dans ../Pages/Scss/Base/_undefined .cursoranimation{ transform: scale(1); transform: translate(-50%,-50%); animation: cursoranimation2 1000ms backwards; } .cursor1{ position:fixed; width: 70px; height: 70px; border:1px solid black; border-radius:50%; left:0; top:0; pointer-events:none; transform: translate(-50%, -50%); z-index: 1; } .cursor2{ position:fixed; width: 8px; height: 8px; background-color:#c6c6c6; border-radius:50%; left:0; top:0; pointer-events:none; transform: translate(-50%, -50%); z-index: 1; } @keyframes cursoranimation2 { 0% { background-color: white; transform: scale(1); transform:translate(-15%,-15%); } 50% { background-color: rgb(179, 247, 202); transform:scale(0.6); transform:translate(-25%,-25%); } 75% { background-color: rgb(179, 247, 202); transform:scale(0.4); transform:translate(-35%,-35%); } 100% { background-color: rgb(132, 247, 176); transform:scale(0.3); transform:translate(-50%,-50%); } }¿Tiene algún consejo para mi situación? Gracias ! (no estoy usando jquery)